<style lang="scss" scoped>
	.content{
		padding:0 30rpx;
	}
	.top{
		width:100%;
		height:100rpx;
		.btn1{
			width: 40rpx;
			height: 40rpx;
			opacity: 1;
			background: rgba(64,158,255,0.40);
			border-radius: 8rpx; 
		}
		.date{
			width:300rpx;
		}
	}
	.charts{
		width:100%;
		width: 690rpx;
		height: 386rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 24rpx ;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0,0,0,0.08); 
		.title{
			width: 100%;
			height: 62rpx;
			background: #409eff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
		}
		.des{
			height:100rpx;
			padding:20rpx;
			border-bottom: 1px solid #eee;
		}
		.items{
			width:100%;
			padding:20rpx 0;
			.item{
				width:33.33%;
			}
		}
	}
	.list{
		width: 688rpx;
		padding:25rpx 0;
		opacity: 1;
		background: #ffffff;
		border-radius: 24rpx;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0,0,0,0.08); 
		margin-top: 30rpx;
		.h1{
			border-left: 6rpx solid #409eff;
			padding:0 20rpx;
		}
		.h2{
			padding:0 20rpx;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #737373;
			flex-wrap: wrap;
			>view{
				width:33.33%;
				flex:none;
			}
		}
	}
</style>

<template>
	<view class="content">
		<view class="top center-flex">
			<view class="btn1 center-flex"><u-icon name="arrow-left" color="#fff" size="28"></u-icon></view>
			<view class="date f26 center-flex">{{date}}</view>
			<view class="btn1 center-flex"><u-icon name="arrow-right" color="#fff" size="28"></u-icon></view>
		</view>
		<view class="charts">
			<view class="title center-flex cfff f28">值班服务台</view>
			<view class="des between-flex">
				<view>今日总体情况</view>
				<view><u-icon name="arrow-down" color="#eee" size="28"></u-icon></view>
			</view>
			<view class="items align-flex">
				<view class="item colum-flex">
					<u-circle-progress width="128" active-color="#fa7d7d" :percent="phonepercent">
							<view class="center-flex" style="color:#fa7d7d;">
							{{phonepercent}}%
							</view>
						</u-circle-progress>
						<view class="c666 f24 m-top10">电话接听率</view>
				</view>
				<view class="item colum-flex">
					<u-circle-progress width="128" active-color="#f7b77c" :percent="orderpercent">
							<view class="center-flex"  style="color:#f7b77c;">
							{{orderpercent}}%
							</view>
						</u-circle-progress>
						<view class="c666 f24 m-top10">工单完成率</view>
				</view>
				<view class="item colum-flex">
					<u-circle-progress width="128" active-color="#6fde7f" :percent="tablepercent">
							<view class="center-flex"  style="color:#6fde7f;">
							{{tablepercent}}%
							</view>
						</u-circle-progress>
						<view class="c666 f24 m-top10">服务台解决率</view>
				</view>
			</view>
		</view>
		
		<view class="list">
			<view class="f34 bold h1">通话: {{value.accept+value.exhale}}次</view>
			<view class="flex h2">
				<view>已接: {{value.accept}}</view>
				<view>未接:  {{value.missed}}</view>
				<view>呼出:  {{value.exhale}}</view>
			</view>
		</view>
		<view class="list">
			<view class="f34 bold h1">已接:  {{value.accept}}次</view>
			<view class="flex h2">
				<view>建单: {{value.create}}</view>
				<view>关联: {{value.relation}}</view>
				<view>找人: {{value.look}}</view>
				<view>无效: {{value.invalid}}</view>
				<view>未操作: {{value.none}}</view>
			</view>
		</view>
		<view class="list">
			<view class="f34 bold h1">工单:  {{value.complete+value.handle+value.maked}}次</view>
			<view class="flex h2">
				<view>已完成: {{value.complete}}</view>
				<view>未完成: {{value.handle}}</view>
				<view style="white-space:nowrap ;">服务台解决: {{value.maked}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data(){
			return{
				date:'',
				head:this.$head,
				value:{},
				phonepercent:0,
				orderpercent:0,
				tablepercent:0
			}
		},
		onLoad(e) {
			this.date=e.date
			this.value=uni.getStorageSync('value')
			console.log(this.value)
			var value=this.value
			// 电话接听率
			if(value.accept){
				var phonepercent=100*Number(value.accept)/(Number(value.accept)+Number(value.missed)+Number(value.exhale))
				phonepercent=phonepercent.toFixed(1)
				this.phonepercent=phonepercent
			}else{
				this.phonepercent=0
			}
			
			// 工单完成率
			if(value.complete){
				var orderpercent=100*Number(value.complete)/(Number(value.complete)+Number(value.handle))
				orderpercent=orderpercent.toFixed(1)
				this.orderpercent=orderpercent
			}else{
				this.orderpercent=0
			}
			
			// 服务台解决率
			if(value.maked){
				var tablepercent=100*Number(value.maked)/(Number(value.complete)+Number(value.handle)+Number(value.maked))
				tablepercent=tablepercent.toFixed(1)
				this.tablepercent=tablepercent
			}else{
				this.tablepercent=0
			}
			
		},
		methods: {
			

		}
	}
</script>

